<template>
  <!-- 推荐歌单详情页 -->
  <div class="listView">
    <ListViewTop :playlist="state.playlist"></ListViewTop>
    <ListViewMain :playlist="state.playlist"></ListViewMain>
  </div>
</template>
  
<script>
import BaseApi from "@/api/index.js";
import { reactive } from "vue";
// 在setup中获取路由信息
import { useRoute } from "vue-router";
import ListViewTop from "@/components/ListViewTop.vue";
import ListViewMain from "@/components/ListViewMain.vue";

export default {
  setup() {
    const route = useRoute();
    let id = route.query.id;
    let state = reactive({
      list: [],
      playlist: {
        creator: {},
        tracks: [],
      },
    });

    async function init() {
      let res = await BaseApi.getPlaylistDetail(id);
      state.playlist = res.data.playlist;
      console.log(res.data.playlist);

      // 提交数据到全局store
      this.$store.commit("setPlayList", state.playlist.tracks);
    }

    return { state, init };
  },
  beforeCreate() {
    this.init();
  },
  components: {
    ListViewTop,
    ListViewMain,
  },
};
</script>
  
<style lang="less" scoped>
</style>
  